<template>
    <section class="register">
        <mt-header title="注册">
            <mt-button slot="left" icon="back" @click="$router.go(-1)"></mt-button>
            <mt-button slot="right" @click="submit">确定</mt-button>
        </mt-header>

        <mt-field label="用户名" placeholder="请输入用户名" v-model.trim="user.username"></mt-field>
        <mt-radio title="性别" v-model="user.sex" :options="sexOpt"></mt-radio>
        <mt-field label="邮箱" placeholder="请输入邮箱" type="email" v-model.trim="user.email"></mt-field>
        <mt-field label="密码" placeholder="请输入密码" type="password" v-model.trim="user.password"></mt-field>
        <mt-field label="确认密码" placeholder="请再次输入密码" type="password" v-model.trim="rePwd"></mt-field>
    </section>
</template>

<script>
import { Toast } from 'mint-ui';

export default {
    name: '',
    data() {
        return {
            user: {
                email: '',
                id: '',
                password: '',
                sex: '1',
                username: ''
            },
            rePwd: '',
            sexOpt: [{
                label: '男',
                value: '1'
            }, {
                label: '女',
                value: '0'
            }]
        }
    },
    methods: {
        submit() {
            if (!this.user.username) {
                Toast('用户名不能为空')
                return false
            } else if (!/^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/.test(this.user.email)) {
                Toast('请输入正确邮箱')
                return false
            } else if (!this.user.password) {
                Toast('请输入密码')
                return false
            } else if (this.user.password !== this.rePwd) {
                Toast('两次输入的密码不一致')
                return false
            }

            this.$http.postObj('/user/regsiter', this.user)
                .then((data) => {
                    if (data.code === 0) {
                        this.$router.replace({ name: 'login' })
                    } else {
                        Toast(data.msg)
                    }
                })
        }
    },
    watch: {},
    mounted() { }
}
</script>

<style lang="less">
.register {
  .mint-radiolist {
    padding: 0 10px;
    background-color: #fff;
    display: -webkit-box;
    display: flex;
    align-items: center;
    .mint-radiolist-title {
      width: 105px;
      color: initial;
      font-size: initial;
      margin: 0;
    }
    .mint-cell-wrapper {
      padding: 0;
    }
    .mint-radiolist-label {
      padding: 0 20px 0 0;
    }
  }
}
</style>
